<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>考评页面</title>
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/weui.min.css')}}">
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/jquery-weui.css')}}">
    <link rel="stylesheet" href="{{asset('/css/system/iconfont.css')}}">
    <link rel="stylesheet" href="{{asset('/css/system/common.css')}}">
    <link rel="stylesheet" href="/css/system/index-view.css?v=2018121402">
    <script src="{{asset('/kaohe/js/echarts-all.js')}}"></script>
    @include('sysadmin.head')
    <style>
        body{
            background: #fff;
        }

    </style>
</head>
<body ontouchstart>
<div class="index-review">
    <div class="header-bk">
        <div class="con-head">
            <img src="{{userlogo($perf->user_id)}}"><span class="user-name">{{getUserName($perf->user_id)}}</span>
        </div>
        <div class="list-content">
            <div class="section-li">
                <span class="circl-span"></span>
                <p>综合绩效:</p>
                <p class="score-list">{{$perf->total}}</p>
            </div>
            <div class="section-li" >
                <span class="circl-span sec-circle"></span>
                <p>业绩:</p>
                <p class="score-list">{{$perf->yeji}}</p>
            </div>
            <div class="section-li">
                <span class="circl-span third-circle"></span>
                <p>考勤:</p>
                <p class="score-list">{{$perf->kaoqin}}</p>
            </div>
            <div class="section-li">
                <span class="circl-span third-circle"></span>
                <p>奖惩:</p>
                <p class="score-list">{{$perf->jiangcheng}}</p>
            </div>
        </div>
    </div>
    <p class="p-title">月度意见</p>
    <div class="echart-contain" style="width: 300px;height: 300px;margin: 0 auto;">
        <div id="part" style="width: 300px;height: 300px; padding-top: 20px; overflow: hidden;">
            @if($is_origin ==1)
                <div id="echart_ld" style="width:100%;height:300px"></div>
            @else
                <span style="margin-left: 120px;">没有数据</span>
                <canvas id="myCanvas"  width="900" height="900"
                        style="display:none; width: 300px;height:300px;">
                </canvas>
            @endif
        </div>
        <div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 147px; top: 147px; pointer-events: none;">半径模式 <br>rose8 : 40 (22.22%)</div>
    </div>
    <p class="p-title">年度考评</p>
        <div id="part2" style="width: 100%;height: 240px;">
        </div>

</div>
 @include('sysadmin.admin-caidan')
<script src="{{asset('/kaohe/js/jquery-2.1.4.min.js')}}"></script>
<script src="{{asset('/addons/jquery-weui-build/js/fastclick.js')}}"></script>
<script src="{{asset('/kaohe/js/echarts.min.js')}}"></script>
<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script src="{{asset('/addons/jquery-weui-build/js/jquery-weui.min.js')}}"></script>
<script>
    $('.kaohe-item').click(function(){
        $('.show-hidden').toggle();
    })
    $('.set-btn').click(function () {
        $('.set-hidden').toggle();
    })
    $('.admin-item').click(function(){
        $('.front-show-hidden').toggle();
    });
//    $('.find-link').click(function () {
//        $('.show-hidden').toggle()
//    });

    var u = navigator.userAgent;
    //var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isiOS){
        if(window.screen.width <=375 && window.screen.height <= 667){
            $('#myCanvas').css('width','450px');
            $('#myCanvas').css('height','450px');
        }
    }

    var myChart_ld = echarts.init(document.getElementById('echart_ld'));
    option_ld = {
        tooltip : {
            trigger: 'axis'
        },

        polar : [
            {
                indicator : [
                    { text: '主动性', max: 5},
                    { text: '专业性', max: 5},
                    { text: '敬业精神', max: 5},
                    { text: '学习能力', max: 5},
                    { text: '合作精神', max:5}
                ]
            }
        ],
        calculable : true,
        series : [
            {

                name: '综合得分',
                type: 'radar',
                data : [
                    {
                        value :{!! $value_opinion!!},
                        name : '得分'
                    }
                ]
            }
        ]
    };

    myChart_ld.setOption(option_ld);



    var myChart2 = echarts1.init(document.getElementById('part2'));
    option2 = {
    color: ['#65B7B1'],
    legend: {
        data:['绩效值'],
        right:20
    },
    tooltip : {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'绩效值',
            type:'bar',
            barWidth: '60%',
            markLine: {
                data: [
                    { yAxis: 100, name: '满分线'}
                ]
            },
            data:{!! $months !!}
        }
    ]
};
    myChart2.setOption(option2);
    
</script>
</body>
</html>